<template>
  <div class="service">
    <el-col
      :class="['service_tag', 'animate__animated', pageY>700?'animate__fadeInUp':null]"
      v-for="(item, index) in serviceData"
      :key="index"
    >
      <i :class="['iconfont', item.icon]"></i>
<!--      <img :src="item.icon" alt="" />-->
      <span class="line"></span>
      <div class="service_tag_name">
        <span>{{ item.name }}</span>
      </div>
      <div class="service_tag_description" v-html="item.description.replace(/\n/g, '<br />')">
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "service",
  components: {},
  data() {
    return {
      pageY: 0,
      serviceData: [
        {
          icon: "iconicon8",
          // icon: require("../../../assets/image/home/service_1.png"),
          name: "代运营服务",
          description: `翔盛悦代运营服务通过多元、高效的营销推广手段，能有效帮助金融企业提升品牌核心竞争力，降低“吸粉获客”成本，提高有效转换率，实现业务平稳增长。
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;翔盛悦基于运营商大数据优势，可“一户一策”为各金融企业准确投放目标客户，提供品牌宣传整体方案策划、互联网平台代运营、营销推广、数据追踪在内的多种服务，为客户提供实惠、高效的代运营服务。`
        },
        {
          icon: "iconicon9",
          // icon: require("../../../assets/image/home/service_2.png"),
          name: "审批决策云服务",
          description: `翔盛悦集成式、一站式金融审批决策云服务平台，基于翔盛悦运营商大数据和风控云等技术理念，结合机器学习和人工智能算法的新科学，从数据规则、审贷规则集、风控模型等不同层面帮助客户实现包括贷前审核、贷中监控和贷后管理的整个全生命周期的风险管控，降低风险运营成本，提高批贷资产的质量，为客户保驾护航。
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;底层支持数据包括终端信息、消费信息、流量信息、通话信息、位置信息等，目前已开发坏账风险、关联分析、稳定性、通信特征、内容偏好、用户价值、轨迹特征等维度的风险决策模型，为客户输出模型综合评分及履约预测评估结果。`
        },
        {
          icon: "iconicon10",
          // icon: require("../../../assets/image/home/service_3.png"),
          name: "贷后催收云服务",
          description: `翔盛悦贷后管理平台是一款成熟的催收业务流程系统，通过与金融机构系统的对接实现案件的自动导入和更新、催收过程全流程跟踪，提高催收效率，节约催收成本。
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;职能分案：通过对债务人的全面分析，匹配适合的催收人员进行催收；
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能呼出：对债务人的数据进行清洗，然后通过预测式外呼系统外呼，提高呼出效率，减少催收人员的等待时间；
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;智能客服：通过人工智能机器人催收，与进行客户相对复杂的交互，实现早期催收（M1）的人工全替代；
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;失联修复：通过建立模型，利用大数据，对失联的债务人进行联系信息修复，找到其相关人员，实现与失联债务人的复联。`
        },
        {
          icon: "iconicon11",
          // icon: require("../../../assets/image/home/service_4.png"),
          name: "进件流量路由云服务",
          description: `爱房进件系统集合了房抵贷业务流程中所需的进件信息录入、申请材料上传、授信审批、合同合成、放款审核、押品管理等主要功能，操作便捷，流程自动化。
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在客户进件时，通过风控模型、人脸识别，对进件的客户基础信息与抵押物信息进行全方面的监察。展现形式上可支持pc、移动等多设备的适配，可灵活自主化的嵌入合作伙伴的进件系统，并且可以通过api接口的方式实现全自动化的一键进件。`
        }
      ]
    };
  },
  created() {},
  mounted() {
    window.addEventListener("scroll", this.scrollToImg);
  },
  methods: {
    scrollToImg() {
      this.$nextTick(() => {
        this.pageY = document.documentElement.scrollTop;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.service {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3.2rem 200px;
}

.service_tag {
  background-color: rgba(26, 103, 245, .6);
  width: 25%;
  padding: 1.28rem;
  height: 504px;
  color: white;
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  overflow: hidden;
  .iconfont {
    display: inline-block;
    /*width: 92px;*/
    /*height: 92px;*/
    font-size: $fz64;
  }
  .line {
    width: 4.25rem;
    border-bottom: 4px solid white;
  }
  .service_tag_name {
    font-size: $fz16;
    font-weight: bold;
  }
  .service_tag_description {
    font-size: $fz14;
    display: none;
    line-height: 1.3;
    text-align: justify;
    letter-spacing: 2px;
    text-indent: 2rem;
  }
}

.service_tag:first-child {
  animation-duration: .5s;
}
.service_tag:nth-child(2) {
  animation-duration: 1s;
}
.service_tag:nth-child(3) {
  animation-duration: 1.5s;
}
.service_tag:last-child {
  animation-duration: 2s;
}

.service_tag:hover {
  background-color: $primary;
  /*opacity: 1;*/
  .service_tag_description {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .iconfont,
  .line {
    display: none;
  }
}

@media screen and(min-width: 415px) and(max-width: 1199px) {
  .service {
    padding: 3.2rem 10px;
  }
}

@media screen and(min-width: 1200px) and(max-width: 1700px) {
  .service {
    padding: 3.2rem 50px;
  }
}

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {

  .service {
    display: block;
    padding: 20px !important;
  }

  .service_tag {
    width: 100% !important;
    height: 120px;
    margin: 5px 0;
    background-color: $primary !important;
    opacity: 1 !important;

    .iconfont {
      /*width: 45px;*/
      /*height: 45px;*/
      font-size: $fz40;
    }

    .service_tag_name {
      font-size: 15px;
    }
  }
  .service_tag:hover {
    justify-content: space-around;
    .service_tag_description {
      display: none;
    }
    img,
    .line {
      display: block;
    }
  }
}
</style>
